<template>
  <div class="login-box">
    <div class="login-title">
      <img src="../../public/favicon.ico" alt="" />
      <el-text>{{ system.name }}</el-text>
    </div>
    <el-card class="login-form">
      <el-form :model="form" size="default" label-position="top">
        <el-form-item label="帐 号">
          <el-input v-model="form.user" />
        </el-form-item>
        <el-form-item label="密 码">
          <el-input v-model="form.pwd" type="password" show-password />
        </el-form-item>
        <el-form-item style="margin-bottom: 0">
          <el-button type="primary" @click.stop="Login">登 录</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-link
      type="success"
      href="tencent://AddContact/?subcmd=all&uin=304237539"
      target="_blank"
      underline
    >
      @ 软件开发点此联系（浏览器会提示 “此站点正在尝试打开 扣扣”，请选择打开即可）
    </el-link>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import router from '@/router'
import { useStore } from '@/stores'
import { ElMessage } from 'element-plus'
import { system } from '@/config'

/** 重置全部状态 */
useStore().$reset()

/** 表单参数 */
const form = reactive({
  /** 帐号 */
  user: '',
  /** 密码 */
  pwd: ''
})

/** 登录系统 */
const Login = () => {
  if (form.user === 'admin' && form.pwd === 'admin') {
    router.replace({ name: 'HomePage' })
  } else {
    ElMessage.error({ message: '登录失败，帐号或密码错误！', duration: 2500 })
  }
}
</script>

<style scoped lang="scss">
.login-box {
  width: 100%;
  height: 100%;
  background-color: #73767a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .login-title {
    margin-top: -60px;
    margin-bottom: 20px;

    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 36px;
      height: 36px;
      margin-right: 10px;
    }

    .el-text {
      font-size: 30px;
      color: white;
      line-height: 0;
    }
  }

  .login-form {
    width: 28%;
    height: 300px;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .el-form-item {
      margin-bottom: 30px;

      .el-button {
        width: 100%;
        height: 40px;
      }
    }
  }

  .el-link {
    position: fixed;
    bottom: 30px;
  }
}
</style>
